<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="{{CDN}}/easyui/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="{{CDN}}/easyui/themes/icon.css">
		<script type="text/javascript" src="{{CDN}}/easyui/jquery.min.js"></script>
		<script type="text/javascript" src="{{CDN}}/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="{{CDN}}/easyui/locale/easyui-lang-zh_CN.js"></script>
		<script>
            
            $(function(){

                /*表格初始化*/
                $("#grid").datagrid({
                    singleSelect:true,
                    fit:true,
                    fitColumns:true,
                    collapsible:true, 
                    striped:true,
                    rownumbers:true, 
                    columns:[[    
                        {field:'db_name',title:'数据库',width:100,align:'left'},
                        {field:'table_code',title:'表编码',width:100,align:'left'}, 
                        {field:'table_name',title:'表名称',width:100,align:'left'},
                        {field:'table_desc',title:'描述',width:300,align:'left'}
                    ]],
                    url:'/document/table/getTableList'
                });



                //添加按钮
                $("#add_btn").click(function(){
                    $("#add_dialog").dialog({ 
                        title: '添加',    
                        width: 1000,    
                        height: 500,    
                        //closed: false,    
                        //cache: false,
                        //modal: true,
                        buttons:[{
                            text:'保存',
                            iconCls:'icon-save',
                            handler:function(){
                                $.post("/document/table/insertTable",parent.getFormJson($('#add_form')),function(response){
                                    $("#add_dialog").dialog('close');
                                    $("#grid").datagrid('reload');
                                })
                            }
                        }]
                    });
                });


                //修改按钮
			$("#edit_btn").click(function(){
				var rows = $('#grid').datagrid('getSelections');
				if(rows.length<1){
					$.messager.alert('提示','请勾选一条');
					return false;
				}
				
				$("#edit_id").textbox("setValue", rows[0].id);
				$("#edit_db_name").textbox("setValue", rows[0].db_name);
				$("#edit_table_code").textbox("setValue", rows[0].table_code);
				$("#edit_table_name").textbox("setValue", rows[0].table_name);
				$("#edit_table_desc").textbox("setValue", rows[0].table_desc);

				$("#edit_dialog").dialog({ 
					title: '修改',    
					width: 1000,    
					height: 500,    
					closed: false,    
					cache: false,
			   		modal: true,
			   		buttons:[{
						text:'保存',
						iconCls:'icon-save',
						handler:function(){
							$.post("/document/table/updateTable",parent.getFormJson($('#edit_form')),function(response){
								$("#edit_dialog").dialog('close');
								$("#grid").datagrid('reload');
							})
						}
					}]
				});
			});	


            });
        </script>
    </head>
    <body class="easyui-layout">
        <!-- 主表格 -->
        <div region="center" border="false">
            <table id="grid" data-options="toolbar:'#tb'">
                    <div id = "#tb">
                            关键字：<input class="easyui-textbox"  id ="search_key" name="key" style="width:300px"  />
                            <a href="#" id="search_btn" class="easyui-linkbutton"	    data-options="iconCls:'icon-search'"  >搜索</a>
                            <a href="#" id='add_btn' class="easyui-linkbutton"  data-options="iconCls:'icon-add'">添加</a>
                            <a href="#" id='edit_btn' class="easyui-linkbutton"  data-options="iconCls:'icon-edit'">修改</a>
                            <a href="#" id='show_btn' class="easyui-linkbutton"  data-options="iconCls:'icon-search'">预览前100条</a>
                    </div>
            </table>
        </div>

        <!-- 一些隐藏的对话框 -->
		<!-- 新增页 -->
		<div style="display:none" id="add_dialog">
            <form id ="add_form" method="post" >
                <table width="100%">
                    <tr>
                        <td align="right" width="20%">db_name:</td>
                        <td width="20%"  align="left" >
                            <input class="easyui-textbox"  id ="add_db_name" name="db_name" style="width:800px"  />
                        </td>
                    <tr>
                    </tr>
                        <td align="right" width="20%">table_code:</td>
                        <td width="20%"  align="left">
                            <select class="easyui-textbox"  id="add_table_code" name="table_code"  style="width:800px">
                        </td>
                        <td width="20%" ></td>
                    </tr>
                    <tr>
                        <td align="right" width="20%">table_name:</td>
                        <td width="20%"  align="left">
                            <select class="easyui-textbox"  id="add_table_name" name="table_name"  style="width:800px">
                        </td>
                        <td width="20%" ></td>
                    </tr>
                    <tr>
                        <td align="right" width="20%">说明:</td>
                        <td width="20%"  align="left">
                            <select class="easyui-textbox"  id="add_table_desc" name="table_desc"  data-options="multiline:true" style="width:800px;height: 150px">
                        </td>
                        <td width="20%" ></td>
                    </tr>
                </table> 
            </form>
        </div>


            <!-- 修改页 -->
		<div style="display:none" id="edit_dialog">
            <form id ="edit_form" method="post" >   
                <table width="100%">
                    <tr style="display:none">
                        <td align="right" width="20%">id:</td>
                        <td width="20%"  align="left" >
                            <input class="easyui-textbox"  id="edit_id"  name="id" style="width:200px"  />
                        </td>
                    <tr>
                        <tr>
                            <td align="right" width="20%">数据库:</td>
                            <td width="20%"  align="left" >
                                <input class="easyui-textbox"  id ="edit_db_name" name="db_name" style="width:800px"  />
                            </td>
                        <tr>
                        </tr>
                            <td align="right" width="20%">表编码:</td>
                            <td width="20%"  align="left">
                                <select class="easyui-textbox"  id="edit_table_code" name="table_code"  style="width:800px">
                            </td>
                            <td width="20%" ></td>
                        </tr>
                        <tr>
                            <td align="right" width="20%">表名称:</td>
                            <td width="20%"  align="left">
                                <select class="easyui-textbox"  id="edit_table_name" name="table_name"  style="width:800px">
                            </td>
                            <td width="20%" ></td>
                        </tr>
                        <tr>
                            <td align="right" width="20%">说明:</td>
                            <td width="20%"  align="left">
                                <select class="easyui-textbox"  id="edit_table_desc" name="table_desc" data-options="multiline:true" style="width:800px;height: 150px">
                            </td>
                            <td width="20%" ></td>
                        </tr>
                </table> 
            </form>
        </div> 


    </body>